<!-- Copyright (c) 2022 渝州大数据实验室
 *
 * Lanius is licensed under Mulan PSL v2.
 * You can use this software according to the terms and conditions of the Mulan PSL v2.
 * You may obtain a copy of Mulan PSL v2 at:
 *
 *     http://license.coscl.org.cn/MulanPSL2
 *
 * THIS SOFTWARE IS PROVIDED ON AN "AS IS" BASIS, WITHOUT WARRANTIES OF ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO NON-INFRINGEMENT, MERCHANTABILITY OR FIT FOR A PARTICULAR PURPOSE.
 * See the Mulan PSL v2 for more details.
-->
<!-- 
* @desc:用户管理新增or编辑弹窗
* @fileName:Operation.vue
* @author:chenxiaofeng@yzbdl.ac.cn
* @date:2022-4-15
!-->
<script setup lang="ts">
import { onMounted, reactive, ref } from "vue";
import { checkPassword } from "../../../../services/common/tool";
import type { FormInstance } from "element-plus";
// 接受父组件传回
const props = defineProps({
  // 角色下拉下拉值
  roleList: Array as any,
  // 新增用户方法回调
  saveUser: Function as any,
  // 修改用户方法回调
  editUser: Function as any,
  // 修改用户当前行数据
  oneUserInfo: Object as any,
  // 新增或修改文字
  addOrEdit: String,
});

const formSize: any = ref("default");
const ruleFormRef = ref<FormInstance>();
const labelPosition = ref("top");

/**
 * 表单数据
 */
const ruleForm = reactive({
  userName: "",
  password: "",
  nickName: "",
  role: [],
  chief: false,
});

/**
 * 密码验证正则
 */
const validatePass = (rule: any, value: any, callback: any) => {
  if (value === "") {
    callback(new Error("请输入密码"));
  } else if (!checkPassword(value)) {
    callback(
      new Error("密码必须包含英文大小写，数字，特殊字符，字符数量为6-20位")
    );
  } else {
    callback();
  }
};

/**
 * 定义校验规则
 */
const rules: any = reactive({
  userName: [
    { required: true, message: "请输入用户账号", trigger: "blur" },
    { max: 64, message: "用户账号不能超过64个字符", trigger: "blur" },
  ],
  password: [{ validator: validatePass, required: true, trigger: "blur" }],
  nickName: [
    { required: true, message: "请输入用户昵称", trigger: "blur" },
    { max: 64, message: "用户昵称不能超过64个字符", trigger: "blur" },
  ],
});

/**
 * 提交表单
 * @reture viod
 */
const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  await formEl.validate((valid, fields) => {
    if (valid) {
      if (props.addOrEdit === "新增") {
        let saveObj = {
          nickName: ruleForm.nickName,
          password: ruleForm.password,
          roleIds: ruleForm.role,
          chief: ruleForm.chief,
          userName: ruleForm.userName,
        };
        props.saveUser(saveObj);
      } else {
        let editObj = {
          id: props.oneUserInfo.id,
          nickName: ruleForm.nickName,
          chief: ruleForm.chief,
          roleIds: ruleForm.role,
        };
        props.editUser(editObj);
      }
    } else {
      console.log("error submit!", fields);
    }
  });
};

onMounted(() => {
  let userInfo = { ...props.oneUserInfo };
  if (JSON.stringify(props.oneUserInfo) !== "{}") {
    ruleForm.userName = userInfo.userName;
    ruleForm.nickName = userInfo.nickName;
    ruleForm.chief = userInfo.chief;
    ruleForm.role = userInfo.roles.map((item: any) => {
      return item.id;
    });
  }
});
</script>

<template>
  <div class="operation">
    <el-form
      ref="ruleFormRef"
      :model="ruleForm"
      :rules="rules"
      :label-position="labelPosition"
      label-width="120px"
      class="demo-ruleForm"
      :size="formSize"
    >
      <el-form-item label="用户账号" prop="userName">
        <el-input
          v-model="ruleForm.userName"
          :disabled="props.addOrEdit !== '新增'"
          size="large"
          placeholder="请输入用户账号"
        />
      </el-form-item>
      <el-form-item
        label="账号密码"
        prop="password"
        v-if="props.addOrEdit === '新增'"
      >
        <el-input
          v-model="ruleForm.password"
          type="password"
          size="large"
          show-password
          placeholder="请输入账号密码"
        />
      </el-form-item>
      <el-form-item label="用户昵称" prop="nickName">
        <el-input
          v-model="ruleForm.nickName"
          size="large"
          placeholder="请输入用户昵称"
        />
      </el-form-item>
      <el-form-item label="用户所属角色" prop="role">
        <el-select
          v-model="ruleForm.role"
          size="large"
          multiple
          collapse-tags
          collapse-tags-tooltip
          style="width: 100%"
        >
          <el-option
            v-for="item in props.roleList"
            :key="item.id"
            :label="item.roleName"
            :value="item.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="是否为组织管理员" prop="chief">
        <el-radio-group v-model="ruleForm.chief">
          <el-radio :label="true">是</el-radio>
          <el-radio :label="false">否</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item class="ClickButton">
        <el-button @click="submitForm(ruleFormRef)">确定</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<style scoped lang="scss">
:deep(.el-form-item__label) {
  font-family: PingFang SC;
  font-weight: 700;
  color: #000000;
  font-size: 14px;
}
:deep(.el-input) {
  height: 40px;
  background-color: #ffffff;
}
:deep(.el-textarea) {
  height: 100px;
  background-color: #ffffff;
  .el-textarea__inner {
    height: 100px;
  }
}
.ClickButton {
  :deep(.el-form-item__content) {
    display: flex;
    justify-content: flex-end;
    .el-button {
      height: 40px;
      background-color: #ffffff;
      border: 1px solid;
      border-color: #cccccc;
    }
  }
}
</style>
